<template>
  <nav aria-label="Page navigation example">
  	<ul class="pagination">
  		<li class="page-item pageCount">共{{total}}条</li>
  		<li class="page-item" style="margin-right: 10px;">
  			<select class="form-control" v-model="selectSize" @change="onChange">
  			      <option v-for="si in sizeArray" :value="si" :key="si">{{si}}条/页</option>
  			</select>
  		</li>
  		<li class="page-item" :class="{'disabled':page==1}" @click="prev">
  			<a class="page-link" aria-label="上一页" >
  				<span aria-hidden="true">&laquo;</span>
  			</a>
  		</li>
  		<li class="page-item" @click="toFirst"><a class="page-link" >首页</a></li>
  		<li class="page-item" v-for="item in listNum" :key="item" :class="{'active':item==page}" @click="handleClick(item)"><a
  			 class="page-link">{{item}}</a></li>
  		<li class="page-item" @click="toEnd"><a class="page-link">尾页</a></li>
  		<li class="page-item" :class="{'disabled':page==totalCount}" @click="next">
  			<a class="page-link"  aria-label="下一页">
  				<span aria-hidden="true">&raquo;</span>
  			</a>
  		</li>
  		<li class="page-item pageCount">总共{{totalCount}}页</li>
  	</ul>
  </nav>
</template>

<script>
  export default {
  	name: "pagination",
  	props: {
  		total: {
  			type: [Number, String],
  			default: 0
  		},
  		sizeArray:Array,
  		pageSize: {
  			type: [Number, String],
  			default: 1
  		},
  		currentPage: {
  			type: [Number, String],
  			default: 1
  		}
  	},

  	data() {
  		return {
  			totalCount: 0, //总页数
  			page:this.currentPage,
  			selectSize:this.pageSize
  		}
  	},
  	watch:{   //监听选择的页面条数，改变时传给父组件
  		'selectSize':function(){
  			this.$emit('pageSizeChange',this.selectSize);
  		}
  	},
  	computed: {

  		listNum() {
  			let list = [];
  			//计算总页数
  			//this.totalCount = Math.ceil(this.total / this.selectSize);
        this.totalCount=Math.ceil(this.total / this.selectSize);

  			//超限控制
  			if (this.page <= 0) {
  			//	this.page = 1;
        this.page=1;
  			}
  			if (this.page > this.totalCount) {
  				//this.page = this.totalCount;
          this.page=this.totalCount;
  			}

  			//计算显示页码
  			if (this.totalCount > 5) {
  				if (this.page > 2 && this.page < this.totalCount - 2) {
  					list = [this.page - 2, this.page - 1, this.page, this.page + 1, this.page + 2];
  				} else if (this.page <= 2 && this.page > 0) {
  					for (let i = 1; i <= 5; i++) {
  						list.push(i);
  					}
  				} else if (this.page >= this.totalCount - 2 && this.page <= this.totalCount) {
  					for (let i = 4; i >= 0; i--) {
  						list.push(this.totalCount - i);
  					}
  				}
  			} else {
  				for (let i = 1; i <= this.totalCount; i++) {
  					list.push(i);
  				}
  			}
  			return list;
  		}
  	},
  	methods: {
  		//页码点击事件
  		handleClick(num) {
  			this.page = num;
  			this.$emit('pageChange',this.page);
  		},
  		//上一页
  		prev(e) {
  			if (!e.target.classList.contains['disabled']) {

  				if(this.page>1){
  					this.page--;
  					this.$emit('pageChange', this.page);
  				}

  			}
  		},
  		//下一页
  		next(e) {
  			if (!e.target.classList.contains['disabled']) {
  				if(this.page < this.totalCount){
  					this.page++;
  					this.$emit('pageChange', this.page);
  				}
  			}
  		},
  		//首页
  		toFirst() {
  			this.page = 1;
  			this.$emit('pageChange', this.page);
  		},
  		//尾页
  		toEnd() {
  			this.page = this.totalCount;
  			this.$emit('pageChange', this.page);
  		},
  		onChange(){
  			this.page = 1;
  			this.$emit('pageChange', this.page);
  		}
  	}
  }
</script>

<style scoped="">
  nav{
  	height:40px;
  }
  li.page-item{
  	font-size: 14px;
  }
  .pageCount{
  	line-height: 36px;
  	padding: 0 10px;
  	color:#606266 !important;
  	letter-spacing: 1px;
  }
  .page-item select.form-control{
  	height: 35px;
  	padding: 0px;
  	font-size: 14px;
  	letter-spacing: 1px;
  }
  .page-link{
  	color:#007bff;
  	cursor:pointer;
  }
</style>
